<template>
    <div class="subheadings">
        <span v-if="!name">各省（直辖市）已提交{{showType ? '普查':'详查'}}统计</span>
        <span v-else>{{ name }}</span>
        <el-button type="primary" link  @click="switchingType" v-if="!type">
            {{ showType ? '详查':'普查' }} 
        </el-button>
    </div>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
    >
        <el-tab-pane v-for="(item,index) in auditType" :key="index" :label="item.label" :name="item.value" />
    </el-tabs>
    <div class="table">
        <div class="table-header">
            <span>省(直辖市)</span>
            <span>栋数/栋</span>
            <span>面积/万平方米</span>
        </div>
        <div class="table-data" :key="activeName">
            <vue3-seamless-scroll
                :hover="true"
                :hover-stop="true"
                :list="tableData"
                :step="0.2"
                class="seamless-warp"
            >
                <div class="table-data-item" v-for="(item,index) in tableData" :key="index">
                    <span>{{ item.province }}</span>
                    <span>{{ item.dong }}</span>
                    <span>{{ item.area }}</span>
                </div>
            </vue3-seamless-scroll>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { getProvinceSamplingRate } from '@/api/housingFacilities.js';
const props = defineProps({
    type: {
        default: 0,
        type: Number,
    },
    name: {
        type: String,
    }
})
const { type, name } = toRefs(props)
const data = reactive({
    showType: true,//展开收起
    activeName: 'all',//统计审核状态,默认显示全部
    tableData:[],
    generalAll:[],
    generalCheck:[],
    siftAll:[],
    siftCheck:[],
})
const { showType, activeName, tableData,generalAll, generalCheck, siftAll, siftCheck  } = toRefs(data)
const auditType = [{label: '全部', value: 'all'}, {label:'已审核', value:'audited'}]
function init(){
    getProvinceSamplingRate().then((res) => {
        generalAll.value = res.data.generalAll
        generalCheck.value = res.data.generalCheck
        siftAll.value = res.data.siftAll
        siftCheck.value = res.data.siftCheck
        tableData.value = res.data.generalAll
        // 如果是详查
        if(type.value === 2){
            tableData.value = res.data.generalAll
        }
    });
}
// 挂载完成
onMounted(() => {
  init();
})
// 切换统计类型
function switchingType() {
  showType.value = !showType.value
  if(showType.value){
    tableData.value = generalAll.value
  }else{
    tableData.value = siftAll.value
  }
  activeName.value = 'all'
}
function handleClick(tab){
    if(tab.props.name == 'all'){
        showType.value ? tableData.value = generalAll.value : siftAll.value
    }else{
        showType.value ? tableData.value = generalCheck.value : siftCheck.value
    }
}
</script>
<style scoped lang="scss">
.subheadings{
    width: 450px;
    height: 105px;
    background-size: 100% 100%;
    background-image: url('@/assets/images/common/bg_little_title.png');
    margin: 0 auto;
    color: #E4F5FF;
    font-size: 22px;
    font-family: Source Han Sans;
    font-weight: 500;
    line-height: 80px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 40px;
    .el-button--primary{
        background: transparent !important;
        border: none !important;
        float: right;
        margin-top: 20px;
        margin-right: 18px;
        color: #1A76FF !important;
        font-size: 14px;
        cursor: pointer;
        svg{
            width: 14px;
        }
    }
}
.el-tabs{
    position: absolute;
    top: -55px !important;
    right: 0;
}
.table{
    width: 420px;
    height: 200px;
    margin: -55px auto 0;
    text-align: center;
    &-header{
        color: #E6F4FD;
        font-size: 16px;
        display: flex;
        border-bottom: 1px solid #475ADB;
        padding-bottom: 6px;
        span{
            display: block;
            width: calc(100%/3);
        }
    }
    &-data{
        height: 170px;
        overflow: hidden;
        margin-top: 4px;
        &-item{
            display: flex;
            background:rgba(71, 90, 219, .15) !important;
            height: 30px;
            line-height: 30px;
            margin-top: 4px;
            span{
                display: block;
                width: calc(100%/3);
                color: #46FFFF;
                font-size: 16px;
                &:first-child{
                    color: #E6F4FD;
                }
            }
        }
    }
}
</style>